import Cookies from 'js-cookie'

// 定义状态对象，用于存储侧边栏状态和设备类型
const state = {
  sidebar: {
    // 侧边栏是否打开，根据Cookies的值初始化，如果Cookies没有值，则默认为true
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    // 侧边栏切换动画是否禁用，初始值为false
    withoutAnimation: false
  },
  // 设备类型，默认为桌面设备
  device: 'desktop'
}

// 定义状态变更的突变对象
const mutations = {
  // 切换侧边栏的打开/关闭状态
  TOGGLE_SIDEBAR: state => {
    // 切换侧边栏打开状态
    state.sidebar.opened = !state.sidebar.opened
    // 重置动画禁用状态
    state.sidebar.withoutAnimation = false
    // 根据侧边栏状态更新Cookies
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  // 关闭侧边栏
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    // 更新Cookies表示侧边栏关闭状态
    Cookies.set('sidebarStatus', 0)
    // 设置侧边栏为关闭状态
    state.sidebar.opened = false
    // 根据参数决定是否禁用动画
    state.sidebar.withoutAnimation = withoutAnimation
  },
  // 切换设备类型
  TOGGLE_DEVICE: (state, device) => {
    // 更新设备类型
    state.device = device
  }
}

// 定义动作对象，用于触发状态变更
const actions = {
  // 切换侧边栏动作
  toggleSideBar({ commit }) {
    // 提交切换侧边栏的突变
    commit('TOGGLE_SIDEBAR')
  },
  // 关闭侧边栏动作
  closeSideBar({ commit }, { withoutAnimation }) {
    // 提交关闭侧边栏的突变，并传递是否禁用动画的参数
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  // 切换设备类型动作
  toggleDevice({ commit }, device) {
    // 提交切换设备类型的突变
    commit('TOGGLE_DEVICE', device)
  }
}

// 导出模块
export default {
  // 使状态命名空间化，以实现模块间的状态隔离
  namespaced: true,
  // 定义模块的状态
  state,
  // 定义模块的突变
  mutations,
  // 定义模块的动作
  actions
}
